<template>
	<view class="content">
		<search></search>
		<image src="../../static/img/wyyIcon.png" :class="[play ? 'iconPlay' : 'iconPause']" @click="toMain"></image>

		<u-swiper :list="list" @click="swiperEvent"></u-swiper>
		<recommend></recommend>
		<ranking></ranking>
	</view>
</template>

<script>
import recommend from '@/components/recommendSongSheet.vue';
import ranking from '@/components/ranking.vue';
import search from '@/components/search.vue';
import store from '@/store/index.js';

export default {
	data() {
		return {
				play: false,
			list: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			]
		};
	},
	onLoad() {},
	methods: {
		swiperEvent(e) {
			console.log(e);
			window.location.href ="https://main.m.taobao.com/?sprefer=sypc00"
		},
		open() {
			uni.navigateTo({
				url: '/pages/songSheet/songSheet'
			});
		},
		toMain() {
			uni.navigateTo({
				url: '/pages/main/main'
			});
		}
	},
	mounted() {
		this.play = store.state.playState;
	},
	computed: {
		playState() {	
			return this.$store.state.playState;
		}
	},
	watch: {
		playState(curVal, oldVal) {
			this.play = curVal;
		}
	},
	components: {
		recommend,
		ranking,
		search
	}
};
</script>

<style lang="less" scoped>
.content {
	overflow-y: scroll;
	overflow-x: hidden;
	
	.iconPlay {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 2px;
		top: 0px;
		display: inline-block;
		overflow: hidden;
		animation: rotate 2s linear infinite;
		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
	}
	.iconPause {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 2px;
		top: 0px;
	}
}
</style>
